<style type="text/css">
    .left-panel {
        float: left;
        width: 75%;
    }
    
    .right-panel {
        float: right;
        width: 20%;
        padding-left: 40px;
    }
</style>

<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    window.onload = function()
    {       
        CKEDITOR.replace( 'content_area',{height: 450,} );
        
    }
</script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/jquery/jquery.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){  
      
        $('#create_post').click(function(){
            
            var related_news = $('.related_news:checked');
            var len = related_news.length;
            var related_news_string = '';
            if(len != 0){
                for(i=0;i<len;i++){
                     related_news_string += related_news[i].value + ';';
                 }
                 if($("#related_news").val() == ''){
                     related_news_string = related_news_string.slice(0,-1);
                 }else{
                     related_news_string += $("#related_news").val();
                 }
                 
                 $("#related_news").val(related_news_string);
            }
            
            
            
            $('form').get(0).setAttribute('action','?r=post/create');
            $('form').submit();
        });

        $("#search_box").keyup(function(e){
            if(e.keyCode == 13 ){
                search_string = $('#search_box').val();
                dataString = 'search_string='+search_string;
                $.ajax({
                      type: 'post',
                      url: '?r=post/create',
                      data: dataString,
                      dataType: "html",
                      success: function(data){
                          document.getElementById("search_result").innerHTML = '';
                          document.getElementById("search_result").innerHTML = data;
                      }
                });
            }
        })

    });
    
</script>

<form name="create_form" id="create_form" onkeypress="return event.keyCode != 13;" method="POST" action="javascript:void(0)" enctype="multipart/form-data">
    <div class="left-panel">
        <h3>Thông tin cơ bản</h3><hr />
            <td><label for="normal">Title</label></td>
            <td><input name="title" id="title"  type="text" size="70" style="width:650px"></td>
            <td><label for="normal">Slug</label></td>
            <td><input type="text" value="" name="slug" id="slug" style="width:650px"></td>
            <label>Tags</label>
            <input name="tags" id="tag" type="text" size="70" style="width:650px">
            <label>Nguồn</label>
            <input name="source" id="source" type="text" size="70" style="width:650px">

                    
       
        <br />
        <label for="normal">Giới thiệu</label>
        <textarea  id="short_intro" name="short_intro" rows="3" style="width: 98%"></textarea>
        <label for="normal">Nội dung</label>
        <textarea  id="content_area" name="content" rows="12" style="width: 98%"></textarea>
        
        <br />
        <div style="display: none">
         <label for="normal">Tìm kiếm bài viết liên quan</label>
         <input id="search_box"type="text" placeholder="Tìm kiếm bài viết liên quan"/>
         <input name="related_news" id="related_news" type="hidden"/>
         <div id="search_result">
            
         </div>
         
         <br/>
        </div>
        <label for="normal">Upload ảnh trong bài viết</label>
         <input name="post" id="images" class="images" type="file"  size="20" style="opacity: 0;">
         <div id="images_status"></div>
         
         <table>
             <tr>
                 <td id="images_content" align="center"></td>
             </tr>
         </table>
        <br />
        <table border="0">
            <tr>
                <td>
                    <label for="normal">Hình đại diện</label>
                    <input name="post/thumb" id="thumb" type="file"  size="20" style="opacity: 0;">
                    <input type ="hidden" name="thumb" id="thumb_url"/>
                </td>
            </tr>
            <tr>
                <td>
                    <div><img id="thumb_content" src="" style="width:200px;height:200px;margin-top:15px"></img></div>
                    <div id="thumb_status"></div>
                </td>
            </tr>
        </table>
        <br />
        
         <span style="clear:left"></span>
         <br />
         
      <label for="normal">Thời điểm hiển thị</label>
      <table>
       <tr>
            <td><label>Giờ</label></td>
            <td><label>Phút</label></td>    
            <td><label>Ngày</label></td>
            <td><label>Tháng</label></td>
            <td><label>Năm</label></td>
        </tr>
        <tr>
            <td><input name="hour_start_time"  type="text" maxlength="2" style="width:35px"></td>
            <td><input name="min_start_time"  type="text" maxlength="2" style="width:35px"></td>
            <td><input name="day_start_time" value="<?php echo date('d',$pagevals['time']); ?>" type="text" maxlength="2" style="width:35px"></td>
            <td><input name="mon_start_time" value="<?php echo date('m',$pagevals['time']); ?>"  type="text" maxlength="2" style="width:35px"></td>
            <td><input name="year_start_time" value="<?php echo date('Y',$pagevals['time']); ?>" type="text" maxlength="4" style="width:35px"></td>
       </tr>
     </table>
         
         <br /><br />
         <center>
         <button class="btn" id="create_post" href="#"><span class="icon16 icomoon-icon-cog"></span> Create new post</button>
         <button class="btn" id="cancel" href="?r=post"><span class="icon16 icomoon-icon-cog"></span> Cancel</button>
         </center>
    </div>
    <div class="right-panel">
        <label for="normal" style="width:225px">Trạng thái</label>
        <select name="status" id="status" style="opacity: 0;">
            <option value="pending" selected="selected">Pending</option>
            <option value="approved">Approved</option>
            <option value="active">Active</option>
            <option value="blocked">Blocked</option>
        </select><br /><br />

        <label for="normal" style="width:225px">Danh mục</label>
        <select name="category_id" id="category_id" style="opacity: 0;">
            <?php
                foreach($pagevals['selection_label']['category'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$key.'">'.ucfirst($value).'</option>';
                }
            ?>
        </select><br /><br />
        <div style="display: none">
        <label for="normal" style="width:225px">Vị trí hiển thị</label>
        <select name="position" id="position" style="opacity: 0;">
            <option value="" selected="selected" >None</option>
            <option value="hot-slide">Tin nổi bật - Slide</option>
            <option value="hot-non-slide">Tin nổi bật - non slide</option>
        </select><br /><br />
        
        <label for="normal">Bình chọn</label>
        <select name="vote" id="vote" style="opacity: 0;">
            <?php 
                for( $i=$pagevals['selection_label']['vote'] ; $i >= 1 ; $i--){
                    echo '<option value="'.$i.'">'.$i.'</option>';
                }
            ?>
        </select><br /><br />
        </div>
        <label for="normal" styl>Bài viết Hot?</label>
        <select name="hot_status" id="hot_status" style="opacity: 0;">
            <option value="0">No</option>
            <option value="1" selected="selected">Yes</option> 
        </select>
    </div>
    <span style="clear: both"></span>
</form>